<template>  
  <li :class="{ completed: todo.completed }">  
    <input type="checkbox" v-model="todo.completed" @change="toggleCompletion">  
    {{ todo.text }}  
    <button @click="removeTodo(todo.id)">删除</button>  
  </li>  
</template>  
  
<script>  
export default {  
  props: ['todo'],  
  methods: {  
    toggleCompletion() {  
      this.$emit('update:todo', { ...this.todo, completed: !this.todo.completed });  
    },  
    removeTodo(id) {  
      this.$emit('remove-todo', id);  
    }  
  }  
}  
</script>  
  
<style scoped>  
.completed {  
  color: rgb(244, 117, 117);  
  text-decoration: line-through;  
}  

</style>